<template>
  <div class="hello">
    <div>
      <p>{{ readersNumber }}</p>
      <p>
        <!-- {{ book.title }} -->
      </p>
      <div>
        <ul>
          <li v-for="(item, id) in wzryArray" :key="id">{{ item.name }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { ref, reactive, h, onMounted } from 'vue'

@Options({
  props: {
    msg: String,
  },
})
export default class HelloWorld extends Vue {
  setup(props) {
    onMounted(() => {
      // console.log(this, 'Component is mounted!')
    })
    const readersNumber = ref(0)
    const book = reactive({ title: 'Vue 3 Guide' })
    console.log(readersNumber)
    console.log(book)
    // 异步操作
    let wzryArray = ref([])
    console.log(fetch);
    fetch('../public/data.json')
      .then((res) => {
        //用json格式读出来，也可以改为text，得到的就是一个text字符串，但是要做一个json解析，所以极少用text格式
        console.log(res)

        return res.json()
      })
      //第二个.then拿到的是从后端请求回来的真正的数据
      //想要获取响应数据，需在第一个then中将响应数据转为json再返回给第二个then，在第二个then中去获取值
      .then((res) => {
        console.log(res)
        wzryArray = res
        return wzryArray
      })
      // 请求错误时执行
      .catch((err) => {
        console.log(err)
      })

    // return () => h('div', [readersNumber.value, book.title, wzryArray])
    return {
      readersNumber,
      book,
      wzryArray,
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
